
import React, { Component } from 'react';
// 1.0 导入css文件
import './demo1.css'

class Demo1 extends Component {
    // 1.0 定义cinfo作用是：用来控制评论人和评论内容两个文本框框
    state = {
        cinfo: { user: '', txt: '' },
        list: [{ user: '香奈儿', txt: '好品牌' }]
    }
    // 3.0 定义一个发表评论的方法
    publish = () => {
        // 3.0.1 获取用户输入的评论人和评论内容
        let cinfo = this.state.cinfo;

        // 3.0.2 向state.list数组中push一个新的对象{ user: '', txt: '' }
        // 3.0.2.1 获取评论数组的老数据
        let list = this.state.list;
        list.unshift(cinfo);
        this.setState({ list, cinfo: { user: '', txt: '' } })
    }

    Change = (e) => {
        // 1.0 获取到当前元素的value值
        let value = e.target.value;
        // 2.0  将原来的状态属性cinfo取出来
        let cinfo = this.state.cinfo;  // { user: '', txt: '' }
        // 给对象中的user属性进行赋值
        let key = e.target.name;
        cinfo[key] = value;  // { user: 'abc', txt: '' }
        // 3.0 调用this.setState修改回去
        this.setState({ cinfo })
    }


    // userChange = (e) => {
    //     // 1.0 获取到当前元素的value值
    //     let value = e.target.value;
    //     // 2.0  将原来的状态属性cinfo取出来
    //     let cinfo = this.state.cinfo;  // { user: '', txt: '' }
    //     // 给对象中的user属性进行赋值
    //     cinfo.user = value;  // { user: 'abc', txt: '' }
    //     // 3.0 调用this.setState修改回去
    //     this.setState({ cinfo })
    // }

    // txtChange = (e) => {
    //     let value = e.target.value;
    //     let cinfo = this.state.cinfo;
    //     cinfo.txt = value;
    //     this.setState({ cinfo })
    // }

    render() {
        return (<div className="box">
            <div className="top">

                <input type="text" name="user" placeholder="请输入评论人" className="mg"
                    value={this.state.cinfo.user} onChange={this.Change} />
                <textarea name="txt" id="" cols="30" rows="10" placeholder="请输入评论内容" className="mg"
                    value={this.state.cinfo.txt} onChange={this.Change}></textarea>
                <button className="mg" onClick={this.publish} >发表评论</button>
            </div>

            <div className="bottom">
                {
                    // 2.0 遍历state中的list数组生成评论列表
                    this.state.list.map((item, index) => (
                        <ul key={index}>
                            <li>评论人：{item.user}</li>
                            <li>评论内容：{item.txt}</li>
                        </ul>
                    ))
                }

            </div>
        </div>);
    }
}

export default Demo1;